<template>
  <div id="app">
    <!-- <router-view/> -->
    <div class="arror targer" >123</div>
    <div class="arror" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="less">
  #app {
    height: 100%;
    display: flex;
  }
  .arror {
    position: relative;
    width: 200px;
    height: 40px;
    border: 1px solid #ccc;
    &::before {
      display: block;
      content: '';
      position: absolute;
      right: -34px;
      top: 0;
      z-index: 2;
      width: 0;
      height: 0;
      border-left: 15px solid #fff;
      border-right: 20px solid transparent;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
    &::after {
      display: block;
      content: '';
      position: absolute;
      right: -35px;
      top: 0;
      width: 0;
      height: 0;
      border-left: 15px solid #ccc;
      border-right: 20px solid transparent;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
  }
  .targer {
    background-color: skyblue;
    &::before {
      display: block;
      content: '';
      position: absolute;
      right: -34px;
      top: 0;
      width: 0;
      height: 0;
      border-left: 15px solid skyblue;
      border-right: 20px solid transparent;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
    &::after {
      display: block;
      content: '';
      position: absolute;
      right: -35px;
      top: 0;
      width: 0;
      height: 0;
      border-left: 15px solid skyblue;
      border-right: 20px solid transparent;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
  }
</style>
